Image Map

Discussion: 1. The first part of this statement (

) centers the image using a paragraph tag. Note the

at the end of the statement to indicate that the paragraph ends and the centering is turned off. 2. The name of the image is map1.gif. Because of the absence of a path to the image, it is assumed that the image is located in the same folder as the HTML document. 3. The width of the image is 400 pixels and the height is 25 pixels. 4. There is no border around the image (BORDER="0"). This was just a personal choice. You may wish to include a border around the image. 5. The attribute USEMAP tells the browser that this is an image map defined under the name menuline. Thus USEMAP="#menuline" tells the browser to USE the MAP file named menuline located somewhere in this HTML document. The # indicates an internal link on the same page - much like that of a page jump (Lesson Six). The USEMAP attribute tells the browser which image map file to use for the image. This example uses the image map file named menuline. We must associate a name with the map file and the name you choose is up to you. The map file contains all the necessary data to run the image map. You can have any number of image maps in the same HTML document as each image map will have its own unique name. Note that the name is case sensitive. Thus USEMAP="#menuline" is different from USEMAP="#Menuline". You can think of an image map having basically two parts - (1) the image itself and (2) an invisible map placed over the image. This invisible map breaks the image down into areas (also called regions or hotspots) and assigns a link to each area. These areas are defined by coordinates. Thus when the visitor clicks on the image, USEMAP="#menuline" tells the browser to go to the map file named menuline to determine the required links and hotspots. Here are the lines for the map file named menuline with a discussion to follow: